<script setup>
defineProps({
  cardUrl: String,
})


</script>
<template>
  <div class="outer">
    <div class="box">
      <img :src="cardUrl">
      <div class="title">
        <slot></slot>
      </div>
    </div>
    <div class="active"> </div>
  </div>
</template>

<style scoped lang="less">
.outer {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 144px;
  height: 100px;
  border: 1px solid rgb(207, 207, 207);
  border-radius: 10px;
  box-shadow: 2px 4px 3px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  transition: transform 0.2s;
  transform-origin: center bottom;

  .box {
    width: 130px;
    height: 87px;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-weight: 400;
    margin: 10px 20px 20px;
    font-weight: 600;
    border-radius: 10px;
    z-index: 99;

    img {
      margin: 7px 0;
      height: 55px;
      border-radius: 10%;
    }

    title {
      height: 30%;
      padding-bottom: 5px;
    }
  }

  .active {
    position: absolute;
    width: 500px;
    height: 500px;
    z-index: 1;
  }

  &:hover {
    transform: scale(1.05);
  }

  &:hover .active {
    animation: loader 5s infinite linear;
    background: linear-gradient(to right, #337ecc, #d9ecff, #337ECC);
  }

  @keyframes loader {
    0% {
      rotate: 0deg;
    }

    100% {
      rotate: 360deg;
    }
  }

}
</style>